<template>
  <van-nav-bar title="退货商品" left-text="返回" left-arrow @click-left="goBack" />
  <section class="aui-flexView">
    <!-- 订单详细 -->
    <section class="aui-scrollView">
      <!-- 订单状态 -->
      <div class="aui-pay-change">
        <div class="aui-flex">
          <div class="aui-flex-box">
            <h3>{{ info.status_text }}</h3>
          </div>
          <div class="aui-pay-zfb">
            <img src="/assets/images/icon-zfb.png" alt="" />
          </div>
        </div>
      </div>

      <!-- 退货地址 -->
      <div class="aui-flex">
        <div style="font-size: 16px;">收货地址：</div>
        <div class="aui-flex-box">
          <h3>
            {{ info.factory.contact }} <em>{{ info.factory.mobile }}</em>
          </h3>
          <p>{{ info.factory.address }}</p>
        </div>
      </div>

      <!-- 退款详请 -->
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="address"
            is-link
            readonly
            name="address"
            label="寄件地址列表"
            placeholder="请选择寄件地址"
            @click="showAddress = true"
            :rules="[{ required: true, message: '请选择寄件地址' }]"
          />
          <van-popup v-model:show="showAddress" position="bottom">
            <van-picker
              :columns="addresslist"
              @confirm="onAddressConfirm"
              @cancel="showAddress = false"
            />
          </van-popup>
          <van-field
            v-model="status"
            is-link
            readonly
            name="status"
            label="物流公司"
            placeholder="请选择物流公司"
            @click="showPicker = true"
            :rules="[{ required: true, message: '请选择物流公司' }]"
          />
          <van-popup v-model:show="showPicker" position="bottom">
            <van-picker
              :columns="expresslist"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>
          <van-field
            v-model="expresscode"
            name="expresscode"
            label="快递单号"
            placeholder="请填写快递单号"
            :rules="[{ required: true, message: '请填写快递单号' }]"
            />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            确认提交
          </van-button>
        </div>
      </van-form>
    </section>
  </section>
</template>
<script setup>
const { cookies } = useCookies();
const router = useRouter();
const route = useRoute();
const LoginUser = reactive(cookies.get("LoginUser"));
const orderid = ref(0);
const info = ref({
    factory: {},
});
const status = ref("");
const expressid = ref();
const address  = ref("")
const addressid = ref();
const showPicker = ref(false);
const showAddress = ref(false)
const expresscode = ref();
const expresslist = ref([]);
const addresslist = ref([]);
const goBack = () => {
  router.push("/business/order/index");
};
onBeforeMount(() => {
  orderid.value = route.query.orderid ? route.query.orderid : 0;
  getorderInfoData();
});
const getorderInfoData = async () => {
  let result = await Api.orderInfo({
    busid: LoginUser.id,
    orderid: orderid.value,
  });
  if (result.code == 1) {
    info.value = result.data;
  }
  // 获取所有物流信息和寄件地址列表
  let res = await Api.expresslist({
    busid: LoginUser.id,
  })
  if(res.code == 1) {
    expresslist.value = res.data.expresslist;
    addresslist.value = res.data.addresslist
  }
};

// 退款原因确认事件
const onConfirm = ({ selectedOptions }) => {
  showPicker.value = false;
  let [val] = selectedOptions;
  status.value = val.text;
  expressid.value = val.value;
};

// 收货地址确认
const onAddressConfirm = ({ selectedOptions }) => {
  showAddress.value = false;
  let [val] = selectedOptions;
  address.value = val.text;
  addressid.value = val.value;
}

// 确认退货商品地址和物流
const onSubmit = async (val) => {
  let data = {
    busid: LoginUser.id,
    orderid: orderid.value,
    expressid: expressid.value,
    expresscode: expresscode.value,
    addressid: addressid.value
  };

  let result = await Api.orderRefundgoods(data);
  if (result.code == 1) {
    showNotify({
      type: "success",
      message: result.msg,
      onClose: () => {
        router.go(-1);
      },
    });
  } else {
    showNotify({ type: "danger", message: result.msg });
  }
};
</script>
<style>
@import url("/assets/css/info.css");
</style>
